<template>
	<view class="clinic">
		<view class="auditStatus">
			<text v-for="(item,index) in audits" :key="item.id" @click="status(index)" :class="auditsindex == index ? 'selectStatus': ''">{{item}}</text>
		</view>
		<view class="list" v-for="(item,index) in list" :key="item.id" @click="jumpClinicDetails(item.id,index)">
			<view class="listImage">
				<image :src="item.img_url" mode="scaleToFill"></image>
				<!-- <image :src="item.img_url" mode="scaleToFill" style="width: 230rpx; height: 190rpx;"></image> -->
			</view>
			<view>
				<view class="name">
					<view class="nameTxt">
						<text>{{item.service_title}}</text>
					</view>
					<view class="nameImg">
						<image src="/static/image/qita/positions.png" mode="scaleToFill" style="width: 16rpx; height: 20rpx;"></image>
					</view>
					<view class="nameLong">
						<text>{{item.latitudesAndLongitudes}} km</text>
					</view>
				</view>
				<view class="title">
					<text>{{item.synopsis}}</text>
				</view>
				<view class="feiyong">
					<text>已预约：<text class="yuyue">{{item.reserve_num}}</text></text>
					<text class="mianfeiyuyue">免费预约</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 计算经纬度的方法
	import mapNumberUtil from "@/uitl/mapNumberUtil.js";
	export default {
		onLoad() {
			this.latitudes = this.$store.state.longitudeAndLatitude.latitude;
			this.longitudes = this.$store.state.longitudeAndLatitude.longitude;
			if (this.latitudes || this.longitudes) {
				this.getList(0, this.latitudes, this.longitudes);
			} else {
				uni.redirectTo({
					url: "../my/my"
				})
			};
		},
		data() {
			return {
				auditsindex: 0,
				audits: ["全部", "1km", "3km", "5km"],
				list: null,
				latitudes: null,
				longitudes: null,
			};
		},
		methods: {
			async status(index) {
				this.auditsindex = index;
				switch (index) {
					case 0:
						this.getList(0, this.latitudes, this.longitudes);
						break;
					case 1:
						this.getList(1, this.latitudes, this.longitudes);
						break;
					case 2:
						this.getList(3, this.latitudes, this.longitudes);
						break;
					case 3:
						this.getList(5, this.latitudes, this.longitudes);
						break;
				}
			},
			jumpClinicDetails(ids, index) {
				uni.navigateTo({
					url: `../../clinicDetails/clinicDetails?ids=${ids}&juli=${this.list[index].latitudesAndLongitudes}`
				})
			},

			async getList(distance, latitudes, longitudes) {
				let res = await this.$myrequest({
					url: "Service/getList",
					data: {
						distance: distance,
						latitude: latitudes,
						longitude: longitudes,
						pageSize: 10,
						page: 1
					},
				});

				this.list = res.data.data.map((value, key, arr) => {
					let lat2 = parseFloat(value.latitude);
					let long2 = parseFloat(value.longitude);
					// 使用~~取整数；
					return {
						"id": value.id,
						"img_url": value.img_url,
						"latitudesAndLongitudes": (~~mapNumberUtil(latitudes, longitudes, lat2, long2) / 1000).toFixed(2),
						"service_title": value.service_title,
						"synopsis": value.synopsis,
						"reserve_num": value.reserve_num
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.auditStatus {
		width: 100vw;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(150, 151, 153, 1);
		box-shadow: 0rpx 4rpx 8rpx #F6F5F5;

		>text {
			flex: 1;
			text-align: center;
		}
	}

	// 选中状态
	.selectStatus {
		color: rgba(45, 209, 188, 1);
		position: relative;

		&::after {
			display: block;
			content: "";
			width: 16%;
			height: 4rpx;
			border-radius: 4rpx;
			background-color: rgba(45, 209, 188, 1);
			@include shuiping;
			bottom: -12rpx;
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #E1E2E6;


		.listImage {
			width: 230rpx;
			margin-right: 30rpx;

			image {
				display: inline-block;
				width: 100%;
				height: 210rpx;
				border-radius: 10rpx;
			}
		}

		>view {
			display: inline-block;
			width: 430rpx;
			position: relative;

			.name {
				width: 100%;
				display: flex;
				align-items: center;

				>view {
					&:first-of-type {
						text {
							font-size: 28rpx;
						}

						width: 70%;
					}

					&:nth-of-type(2) {
						width: 8%;
						text-align: center;
					}

					&:last-of-type {
						width: 22%;
						font-size: 22rpx;
					}
				}

				image {
					width: 16rpx;
					height: 20rpx;
				}
			}

			.title {
				padding-top: 18rpx;
				display: inline-block;
				width: 100%;
				// height: 118rpx;
				display: flex;
				align-items: flex-start;

				text {
					display: inline-block;
					height: 89rpx;
					@include textFont;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(150, 151, 153, 1);
				}
			}

			.feiyong {
				@include chuizhilianduan;
				width: 100%;

				>text {
					&:first-of-type {
						color: #969799;
						display: inline-block;
						height: 100%;
						display: flex;
						justify-content: center;
						font-size: 22rpx;
						transform: translateY(12rpx);
					}

					&:last-of-type {
						display: inline-block;
						width: 130rpx;
						height: 52rpx;
						color: #FFFFFF;
						font-size: 20rpx;
						text-align: center;
						line-height: 52rpx;
						letter-spacing: 3rpx;
						background: linear-gradient(90deg, rgba(96, 232, 205, 1), rgba(45, 209, 188, 1));
						box-shadow: 1rpx 2rpx 9rpx 1rpx rgba(2, 197, 172, 0.08);
						border-radius: 50rpx;
					}
				}

				.yuyue {
					color: #2DD1BC !important;
				}

				.mianfeiyuyue {
					position: absolute;
					bottom: 15rpx;
					right: 10rpx;
				}
			}
		}
	}

	.clinic {
		padding-bottom: 20rpx;
	}
</style>
